<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.tab span {
				color: #fff;
				padding: 5px 10px;
				margin-left: 10px;
			}

			.active {
				background-color: #FF0000;
			}

			.unactive {
				background-color: #aaa;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!--tab组件-->
			<div class="tab">
				<template v-for="tab in tabs">
					<span v-if="currentOrder==tab.name" class="active" @click="chg(tab.name)">{{tab.value}}</span>
					<span v-else class="unactive" @click="chg(tab.name)">{{tab.value}}</span>
				</template>
			</div>
			<br><br>
			<!--显示组件-->
			<!-- 一直保持活动状态，组件不会重新渲染 -->
			<keep-alive>
				<component :is="currentOrder" />
			</keep-alive>

		</div>
		<script type="text/javascript">
			//组件
			const ordera = {
				template: `
			                <div>未支付订单列表<input type="text"></div>
			              `
			};
			const orderb = {
				template: `
			                <div>已支付订单列表</div>
			              `
			};
			const orderc = {
				template: `
			                <div>已完成订单列表</div>
			              `
			};

			var app = new Vue({
				el: "#container",
				data: {
					tabs: [{
							name: "ordera",
							value: "未支付订单"
						},
						{
							name: "orderb",
							value: "已支付订单"
						},
						{
							name: "orderc",
							value: "已完成订单"
						}
					],
					currentOrder: "ordera"
				},
				components: {
					ordera,
					orderb,
					orderc
				},
				methods: {
					chg(tab) {
						this.currentOrder = tab;
					}
				}
			})
		</script>
	</body>
</html>
